<template>
<view class="container">
	<view style="height:52rpx;width:100%;position:fixed;z-index:100;background-color: #fff;"></view>
	<uni-nav-bar title="意见反馈" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
  <!-- <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      <view class="fb-type">
        <view class="type-label">{{array[index]}}</view>
        <image class="type-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png"></image>

      </view>
    </view>
  </picker> -->
  <view class="fb-body">
    <textarea class="content" @input="inputFeedback" placeholder="请输入您要反馈的问题(200字以内)"></textarea>
    <!-- <view class="text-count">0/500</view> -->
  </view>
  <view class="upload-img">
    <text class="t">上传图片(选填，最多4张)</text>
    <view class="b">
      <!-- <image class="icon" src="/static/images/onimg.png" ></image> -->
      <upload @refresh="onUploadRefresh"></upload>
    </view>
  </view>
  <view class="fb-mobile">
    <!-- <view class="label">手机号码</view> -->
    <view class="mobile-box">
      <input class="mobile" @input="inputPhone" placeholder="联系方式"></input>
      <!-- <image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image> -->
    </view>
  </view>

  <button class="fb-btn" @tap="submit">提交</button>
</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
import upload from "../../../lib/upload/upload";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      feedback: {}
    };
  },

  components: {
    upload,
	uniNavBar
  },
  props: {},
  onLoad: function (options) {},
  onReady: function () {},
  methods: {
	  goback:function(){
		uni.navigateBack();
	  },
    inputFeedback: function (e) {
      console.log(e.detail.value);
      var feed = this.feedback;
      feed.msgContent = e.detail.value;
      this.setData({
        feedback: feed
      });
    },
    inputPhone: function (e) {
      console.log(e.detail.value);
      var feed = this.feedback;
      feed.phone = e.detail.value;
      this.setData({
        feedback: feed
      });
    },
    onUploadRefresh: function (e) {
      console.log("==onUploadRefresh==" + JSON.stringify(e));
      var feed = this.feedback;
      feed.messageImg = JSON.stringify(e.detail);
      this.setData({
        feedback: feed
      });
    },
    submit: function () {
      util.request(api.Feedback, this.feedback, 'POST').then(res => {
        if (res.errno == 0) {
          uni.navigateBack();
        } else {
          util.showErrorToast('系统繁忙，请稍后再试');
        }
      });
    }
  }
};
</script>
<style>
page{
    background: #f4f4f4;
    min-height: 100%;
}

.container{
    background: #f4f4f4;
    min-height: 100%;
    /* padding-top: 30rpx; */
} 

/* .fb-type{
  height: 104rpx;
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.fb-type .type-label{
  height: 36rpx;
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

.fb-type .type-icon{
  height: 36rpx;
  width: 36rpx;
} */

.fb-body{
  width: 100%;
  background: #fff;
  height: 374rpx;
  padding: 30rpx;
  margin-top:30rpx;
}

.fb-body .content{
  width: 100%;
  height: 100%;
  color: #353535;
  line-height: 40rpx;
  font-size: 28rpx;
}

/* .fb-body .text-count{
  padding-top: 17rpx;
  line-height: 30rpx;
  float: right;
  color: #666;
  font-size: 24rpx;
} */

.upload-img {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
}
.upload-img .t {
  font-size: 28rpx;
  color: #888888;
}

.upload-img .b {
  display: flex;
  flex-direction: row;
  margin: 40rpx 0rpx;
}

.upload-img .b .icon {
  width: 100rpx;
  height: 100rpx;
}


.fb-mobile{
  height: 162rpx;
  width: 100%;
  margin-top: 20rpx;
}

/* .fb-mobile .label{
  height: 58rpx;
  width: 100%;
  padding-top: 14rpx;
  padding-bottom: 11rpx;
  color: #7f7f7f;
  font-size: 24rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  line-height: 33rpx;
} */

.fb-mobile .mobile-box{
  height: 104rpx;
  width: 100%;
  color: #333;
  padding-left: 30rpx;
  padding-right: 30rpx;
  font-size: 24rpx;
  background: #fff;
  position: relative;
}

.fb-mobile .mobile{
  position: absolute;
  top: 27rpx;
  left: 30rpx;
  height: 50rpx;
  width: 100%;
  color: #333;
  line-height: 50rpx;
  font-size: 24rpx;
}

.clear-icon{
  position: absolute;
  top: 43rpx;
  right: 30rpx;
  width: 28rpx;
  height: 28rpx;
}

.fb-btn{
  width: 640rpx;
  height: 81rpx;
  line-height: 81rpx;
  background: #b28850;
  border-radius: 40rpx;
  color: #fff;
  font-size: 30rpx;
  margin-top: 80rpx;
}
</style>